.page {
  flex: 1 1 auto;
  padding: 10px 20px 24px 20px;
  background: #192c53;
  border-radius: 10px 10px 0 0;

  // .header {
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   width: 100%;
  //   min-height: 54px;
  //   margin-bottom: 22px;
  //   padding: 12px 30px 12px 20px;
  //   background: #2f5083;
  //   border-radius: 8px;

  //   .left {
  //     display: flex;
  //     align-items: center;

  //     .fieds {
  //       display: flex;
  //       align-items: center;
  //       margin-right: 36px;

  //       .key {
  //         margin-right: 4px;
  //         color: #fff;
  //         font-size: 14px;
  //       }
  //     }
  //   }

  //   .order {
  //     .text {
  //       margin-right: 12px;
  //       color: #7688a5;
  //     }

  //     .item {
  //       display: inline-flex;
  //       align-items: center;
  //       margin-right: 40px;
  //       color: rgba(255, 255, 255, 0.7);
  //       cursor: pointer;
  //       &:hover {
  //         color: #fff;
  //         .icons {
  //           opacity: 0.7;
  //         }
  //       }

  //       &:last-child {
  //         margin-right: 0;
  //       }

  //       &.active {
  //         color: #4de7ff;
  //       }
  //       .icons {
  //         margin-left: 5px;
  //         .up {
  //           display: block;
  //           width: 9px;
  //           height: 7px;
  //           background: url('~@/assets/pc/images/course/icon-order.png') no-repeat center / 100%;
  //           transform: rotate(180deg);
  //           &.active {
  //             background: url('~@/assets/pc/images/course/icon-order-actived.png') no-repeat center /
  //               100%;
  //             transform: rotate(0);
  //           }
  //         }
  //         .down {
  //           display: block;
  //           width: 9px;
  //           height: 7px;
  //           background: url('~@/assets/pc/images/course/icon-order.png') no-repeat center / 100%;
  //           &.active {
  //             background: url('~@/assets/pc/images/course/icon-order-actived.png') no-repeat center /
  //               100%;
  //             transform: rotate(180deg);
  //           }
  //         }
  //       }
  //     }
  //   }
  // }
  .header {
    margin-bottom: 20px;
    .row {
      display: flex;
      padding-top: 10px;
      padding-bottom: 10px;
      color: #fff;
      line-height: 20px;
      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.05);
      .key {
        margin-right: 20px;
        padding: 7px 0;
        opacity: 0.5;
      }
      :global {
        .z-check-tag {
          margin-bottom: 0;
        }
        .z-check-tag-item {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin: 0 10px 0 0;
          padding: 5px 10px;
          background-color: transparent;
          border-radius: 6px;
          &:hover {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }
        .z-check-tag-item-actived {
          background-color: rgba(37, 77, 248, 1);
          &:hover {
            background-color: rgba(37, 77, 248, 1);
          }
        }
      }
    }
  }
  .main {
    .list {
      display: flex;
      flex-wrap: wrap;
      margin: -10px;

      .item {
        width: 20%;
        padding: 10px;
      }
      @media screen and (min-width: 2126px) {
        .item {
          width: 16.6666%;
          // &:nth-child(1n + 25) {
          //   display: none;
          // }
        }
      }
      @media screen and (min-width: 1820px) and (max-width: 2126px) {
        .item {
          /*  &:nth-child(1n + 21) {
            display: none;
          } */
        }
      }
      @media screen and (max-width: 1820px) {
        .item {
          width: 25%;
          /* &:nth-child(1n + 21) {
            display: none;
          } */
        }
      }
    }
  }

  .pagination {
    margin-top: 30px;
  }
}

.select {
  width: 330px;
  color: #fff;

  :global {
    .ant-select-arrow {
      color: #fff;
    }
    .anticon-close-circle {
      background-color: #1d3a67;
    }

    .ant-select-selector {
      height: 46px !important;
      padding: 0 12px !important;
      background: #1d3a67 !important;
      border: none !important;
      border-radius: 6px !important;
      box-shadow: none !important;
      &:hover {
        background: #172e52 !important;
      }
    }

    .ant-select-selection-item,
    .ant-select-selection-placeholder {
      line-height: 46px !important;
    }
  }
}
